<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESD看板</title>
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <style>
        body {
            margin: auto;
            background-color: #030212;
        }
        .el-header{
            background-image: url('../images/TopImg.png'); /* 替换为你的图片路径 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }
        .devices {
            box-sizing: border-box;
            border: solid #101129;
            border-image: url('../images/border.png') 51 38 21 132;
            border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        }
        .main {
            min-height: 85vh;
            display: flex;
        }

        .pic{
            margin-top: 1px;
            margin-left: 1px;
            position: absolute;
        }
        .position{
            position: absolute;
            align-items : center ;
            z-index: 10;
            /* 垂直并排居中显示 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .channelTypeMiss{
            background-color: #969a9b;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .channelTypeNormal{
            background-color: #2cc203;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .channelTypeError{
            background-color: #f82d1f;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .channelTypeStandBy{
            background-color: #888621;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
        .user_skills{
            width: 92%;
            margin: auto;
        }
        /*最外层透明*/
        .el-table, .el-table__expanded-cell{
            background-color: transparent;
        }
        /* 表格内背景颜色 */
        .el-table th,
        .el-table tr,
        .el-table td {
            background-color: transparent;
        }
        /*去除底部白线*/
        .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;
        }

        .el-tabs__item {
            color: #838181;
            font-size: 0.8vw;
        }
        .el-tabs__active-bar{
            background: transparent;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100vh; text-align: center;">
        <el-header height="8vh" style="display: flex;justify-content: center;align-items: center;">
            <div class="title" style="display: flex;justify-content: center;align-items: center;">
                <div style="height: 8vh;">
                    <img :src="logoPath" style="height: 8vh;">
                </div>
                <div>
                    <strong style="color: aliceblue; font-size: 4vh;">ESD实时监控系统</strong>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="time" id="showTime" style="color: aliceblue; position: absolute; right: 3vw; margin-top: -7vh; font-size: 1vw;">
                {{currentTimeStr}}
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="(line1 , index) in lines" :label="line1.lineName" :name="line1.lineName" :key="index">
                    <el-row>
                        <el-col :span="16">
                            <div class="main devices" id="main">
                                <img v-for="(img , i) in imgList[index]" :id="img.id" :src="img.src" class="pic" :key="i"
                                     :style="img.style"/>
                                <span v-for="(item , j) in positionList[index]" :style="item.style"
                                      :id="item.id" class="position" v-if="item.enabled">
                                <span style="color: aliceblue;font-size: 10px;">{{item.detail}}</span>
                                <span>
                                    <img :src="getChannelImg(item.channelType)" :class="getChannelClass(item.status)">
                                </span>
                                <span style="color: aliceblue;font-size: 10px;">{{item.positionName}}</span>
                            </span>
                            </div>
                        </el-col>
                        <el-col :span="8" style="text-align: center;">
                            <div class="statistics-child" style="width: 100%; height: 3vh; margin-top: 5vh;text-align: center;">
                                <span style="color: aliceblue; font-size: 3vh;">ESD通道数据统计</span>
                            </div>
                            <div class="statistics-child" style="width: 100%; margin-top: 1vh;text-align: center;">
                                <el-table
                                        class="user_skills"
                                        :data="analysisList[index]"
                                        :header-cell-style="{background: 'transparent', color: 'aliceblue' }"
                                        :cell-style="addStyle"
                                >
                                    <el-table-column
                                            align="center"
                                            prop="channelName"
                                            label="通道类型">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="icon"
                                            label="图标">
                                        <template slot-scope="scope" v-if="scope.$index!=anDataLength">
                                            <img :src="scope.row.icon" style="border-radius: 2px; background-color: #838181 ;width: 20px; height: 20px;"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="normal"
                                            label="正常">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="error"
                                            label="异常">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="miss"
                                            label="失联">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="standBy"
                                            label="待机">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="total"
                                            label="总计">
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="statistics-child" :id="setPieDivId(index)" style="width: 100%; height: 25vh; margin-top: 5vh;">
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/axios/axios.js"></script>
<script src="../plugins/echart/echarts.min.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgList: [],
            line: null,
            lines: [],
            positionList : [],
            totalMapList: [] ,
            positionClock : null ,
            checkGatewayClock : null ,
            setTimeClock: null ,
            pieClock: null ,
            lineClock: null,
            analysisList : [],
            logoPath: null,
            currentTimeStr: null ,
            activeName: null ,
            anDataLength: 0 ,
        },
        created() {
            axios.get("/line/listAllViewOn").then((res) => {
                if (res.data.code === 0) {
                    this.lines = res.data.data;
                    if(this.lines.length != undefined && this.lines.length !== 0){
                        this.activeName = this.lines[0].lineName  ;
                    }
                }
            });
            axios.get("/line/getLogoPath").then((res) => {
                this.logoPath = res.data;
            });
            // TODO 改为查询选中的生产线数据，以便节省时间？？
            this.getData();
            this.positionClock = window.setInterval(function(){
                for (let i = 0; i < app.lines.length; i++) {
                    if (app.activeName === app.lines[i].lineName){
                        axios.get("/line/getModule?lineName=" + app.activeName).then((res) => {
                            if (res.data.code === 0) {
                                app.imgList[i]= res.data.data;
                            }
                        });
                        axios.get("/line/getCurrentStatus?lineName=" + app.activeName).then((res) => {
                            if (res.data.code === 0) {
                                app.positionList[i] = res.data.data.positionList;
                                app.analysisList[i] = res.data.data.analysisList;
                                app.anDataLength = app.analysisList[i].length - 1;
                                app.totalMapList[i] = res.data.data.totalMap;
                            }
                        });
                    }
                }
            }, 3000);
            this.pieClock = window.setInterval(function(){
                for (let i = 0; i < app.lines.length; i++) {
                    if (app.activeName === app.lines[i].lineName){
                        app.setPiDiv(i);
                    }
                }
            }, 3000);
            this.lineClock = window.setInterval(function(){
                // let screenWidth = window.screen.width;
                // let screenHeight = window.screen.height;
                // var windowWidth = window.innerWidth;
                // var windowHeight = window.innerHeight;
                // // 判断是否全屏，全屏切屏
                // if (screenWidth === windowWidth && screenHeight === windowHeight) {
                for (let i = 0; i < app.lines.length; i++) {
                    if (app.activeName === app.lines[i].lineName){
                        if(i < app.lines.length -1 ){
                            app.activeName = app.lines[i+1].lineName;
                            break;
                        }else{
                            app.activeName = app.lines[0].lineName;
                        }
                    }
                }
                // }
            }, 15000);
            this.checkGatewayClock = window.setInterval(function(){
                let urlParams = new URLSearchParams(window.location.search);
                let queryParam = urlParams.get("line");
                axios.get("/gateway/checkLineGateway?lineName=allLine").then((res) => {
                    if (res.data.code === 0) {
                        let serverIps = "" ;
                        let gatewayStatus = res.data.data;
                        let index = 0 ;
                        for (let i = 0; i < gatewayStatus.length; i++) {
                            if (!gatewayStatus[i].connected){
                                if (index === 0){
                                    serverIps = serverIps + gatewayStatus[i].serverIp;
                                }else{
                                    serverIps = serverIps + "、" + gatewayStatus[i].serverIp;
                                }
                                index++ ;
                            }
                        }
                        if (index > 0){
                            app.$message({
                                type: 'error',
                                message: "网关: " + serverIps + " 的网关出现异常！！"
                            });
                        }
                    }
                }).catch((err) => {
                    app.$message({
                        type: 'error',
                        message: "服务器出现异常！！"
                    });
                });
            }, 3000);
            this.setTimeClock = window.setInterval(function(){
                let currentTime = new Date();
                // 格式化年份
                const year = currentTime.getFullYear();
                // 格式化月份
                const month = (currentTime.getMonth() + 1).toString().padStart(2, '0'); // 使用padStart补齐前导零
                // 格式化日期
                const day = currentTime.getDate().toString().padStart(2, '0');
                const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                app.currentDateStr = year + "年" + month + "月" + day + "日  ";
                let hours = currentTime.getHours();
                let minutes = currentTime.getMinutes();
                let seconds = currentTime.getSeconds();
                hours = hours < 10 ? '0' + hours : hours;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                // 这里 this指向的是window, 所以要使用 app
                app.currentTimeStr = year +"/" + month +"/" + day + " " + days[currentTime.getDay()] + "  " + hours + ":" + minutes + ":" + seconds;
            }, 1000);
        },
        methods: {
            getData(){
                for (let i = 0; i < this.lines.length ; i++) {
                    axios.get("/line/getModule?lineName=" + this.lines[i].lineName).then((res) => {
                        if (res.data.code === 0) {
                            this.imgList[i]= res.data.data;
                        }
                    });
                    axios.get("/line/getCurrentStatus?lineName=" + this.lines[i].lineName).then((res) => {
                        if (res.data.code === 0) {
                            this.positionList[i] = res.data.data.positionList;
                            this.analysisList[i] = res.data.data.analysisList;
                            this.totalMapList[i] = res.data.data.totalMap;
                        }
                    });
                }
            },
            setPieDivId(index){
                return "pieDiv" + index ;
            },
            setPiDiv(index){
                let ecDemo = echarts.init(document.getElementById("pieDiv" + index));
                let pieData = [
                    {
                        name: '正常',
                        value: this.totalMapList[index].normal,
                        itemStyle: {color: '#2cc203'}
                    },
                    {
                        name: '异常',
                        value: this.totalMapList[index].error,
                        itemStyle: {color: '#f82d1f'}
                    },
                    {
                        name: '失联',
                        value: this.totalMapList[index].miss,
                        itemStyle: {color: '#5c5a5a'}
                    },
                    {
                        name: '待机',
                        value: this.totalMapList[index].standBy,
                        itemStyle: {color: '#888621'}
                    }
                ];
                let option = {
                    series : [
                        {
                            type : 'pie',
                            data : pieData ,
                            label: {
                                show : true ,
                                color: 'aliceblue',
                                formatter: function (args) {
                                    return args.data.name + ': ' + args.percent + '%';
                                }
                            },
                            roseType : 'radius'
                        }
                    ]
                }
                ecDemo.setOption(option);
            },
            getChannelClass(status){
                if (status === '失联'){
                    return "channelTypeMiss" ;
                }else if (status === '正常'){
                    return "channelTypeNormal" ;
                }else if (status === '异常'){
                    return "channelTypeError" ;
                }else{
                    return "channelTypeStandBy" ;
                }
            },
            getChannelImg(channelTypeName){
                if (channelTypeName === 'ESD手环') {
                    return "../images/SVG/WH0.svg";
                } else if (channelTypeName === '设备接地') {
                    return "../images/SVG/EM0.svg";
                } else if (channelTypeName === '台垫接地') {
                    return "../images/SVG/RR0.svg";
                } else if (channelTypeName === '离子风扇'){
                    return "../images/SVG/EN0.svg";
                }else if (channelTypeName === '温度计'){
                    return "../images/SVG/TE1.svg";
                }else if (channelTypeName === '湿度计'){
                    return "../images/SVG/HU0.svg";
                }else if (channelTypeName === '尘埃粒子'){
                    return "../images/SVG/CL1.svg";
                }
            },
            addStyle({row,column,rowIndex,columnIndex}){
                if(columnIndex === 1){
                    return ' color:#969a9b';
                }
                if(columnIndex === 2){
                    return ' color: #2cc203';
                }
                if(columnIndex === 3){
                    return ' color: #f82d1f';
                }
                if(columnIndex === 4){
                    return ' color: #969a9b';
                }
                if(columnIndex === 5){
                    return ' color: #888621';
                }
                if(columnIndex === 6){
                    return ' color: #969a9b';
                }
            }
        },
        mounted() {
        },
        beforeDestroy() {
            window.clearInterval(this.positionClock);
            window.clearInterval(this.checkGatewayClock);
            window.clearInterval(this.setTimeClock);
            window.clearInterval(this.pieClock);
            window.clearInterval(this.lineClock);
        }
    });
</script>
</body>
</html>